<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		@import url(https://fonts.googleapis.com/css?family=Molle:400italic&subset=latin,latin-ext);
		body{
		background-color: hsla(0,0%,0%,1);
		margin: 0px;
		overflow: hidden;
		font-family: 'Molle', cursive;
		}
		h2{
		  left: 50%;
		  position: absolute;
		  top: 50%;
		  transform: translate( -50%, -50%);
		  font-size:3em;
		  color:hsla(255, 255%, 255%, .1);
		}
	</style>
	<body>
		<canvas id='canv'></canvas>
		<h2>Midnight Snow</h2>
	</body>
	<script>
		var c = document.getElementById('canv'), 
		    $ = c.getContext("2d");
		var w = c.width = window.innerWidth, 
		    h = c.height = window.innerHeight;
		
		Snowy();
		function Snowy() {
		  var snow, arr = [];
		  var num = 600, tsc = 1, sp = 1;
		  var sc = 1.3, t = 0, mv = 20, min = 1;
		    for (var i = 0; i < num; ++i) {
		      snow = new Flake();
		      snow.y = Math.random() * (h + 50);
		      snow.x = Math.random() * w;
		      snow.t = Math.random() * (Math.PI * 2);
		      snow.sz = (100 / (10 + (Math.random() * 100))) * sc;
		      snow.sp = (Math.pow(snow.sz * .8, 2) * .15) * sp;
		      snow.sp = snow.sp < min ? min : snow.sp;
		      arr.push(snow);
		    }
		  go();
		  function go(){
		    window.requestAnimationFrame(go);
		      $.clearRect(0, 0, w, h);
		      $.fillStyle = 'hsla(242, 95%, 3%, 1)';
		      $.fillRect(0, 0, w, h);
		      $.fill();
		        for (var i = 0; i < arr.length; ++i) {
		          f = arr[i];
		          f.t += .05;
		          f.t = f.t >= Math.PI * 2 ? 0 : f.t;
		          f.y += f.sp;
		          f.x += Math.sin(f.t * tsc) * (f.sz * .3);
		          if (f.y > h + 50) f.y = -10 - Math.random() * mv;
		          if (f.x > w + mv) f.x = - mv;
		          if (f.x < - mv) f.x = w + mv;
		          f.draw();}
		 }
		 function Flake() {
		   this.draw = function() {
		      this.g = $.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.sz);
		      this.g.addColorStop(0, 'hsla(255,255%,255%,1)');
		      this.g.addColorStop(1, 'hsla(255,255%,255%,0)');
		      $.moveTo(this.x, this.y);
		      $.fillStyle = this.g;
		      $.beginPath();
		      $.arc(this.x, this.y, this.sz, 0, Math.PI * 2, true);
		      $.fill();}
		  }
		}
		/*________________________________________*/
		window.addEventListener('resize', function(){
		  c.width = w = window.innerWidth;
		  c.height = h = window.innerHeight;
		}, false);

	</script>
</html>
